<template>
  <div class="property-form">
    <!-- 循环模式选择 -->
    <div class="form-section">
      <div class="form-row">
        <el-form-item label="循环模式">
          <el-select 
            v-model="selectedLoopMode"
            placeholder="请选择循环模式"
            @change="handleLoopModeChange"
            class="loop-mode-select"
          >
            <el-option label="for循环" value="for"></el-option>
            <el-option label="while循环" value="while"></el-option>
            <el-option label="do-while循环" value="doWhile"></el-option>
          </el-select>
        </el-form-item>
      </div>

      <!-- 循环参数配置区域 -->
      <div v-if="selectedLoopMode === 'for'" class="loop-params panel-transition">
        <div class="form-row">
          <el-form-item label="起始值">
            <el-input v-model="loopParams.startValue" placeholder="请输入起始值"></el-input>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="结束值">
            <el-input v-model="loopParams.endValue" placeholder="请输入结束值"></el-input>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="步长">
            <el-input v-model="loopParams.step" placeholder="请输入步长"></el-input>
          </el-form-item>
        </div>
      </div>

      <div v-if="selectedLoopMode === 'while' || selectedLoopMode === 'doWhile'" class="loop-params panel-transition">
        <div class="form-row">
          <el-form-item label="条件表达式">
            <el-input v-model="loopParams.condition" placeholder="请输入条件表达式"></el-input>
          </el-form-item>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="LoopProperty">
import { ref, computed, watch } from "vue";
import { useVueFlow } from "@vue-flow/core";

const props = defineProps({
  node: Object as Node
})

const { updateNode } = useVueFlow()

// 循环模式相关状态
const selectedLoopMode = ref<string>(props.node?.data?.loopMode || 'for');
const loopParams = ref<any>({
  startValue: props.node?.data?.loopParams?.startValue || '0',
  endValue: props.node?.data?.loopParams?.endValue || '10',
  step: props.node?.data?.loopParams?.step || '1',
  condition: props.node?.data?.loopParams?.condition || ''
});

// 监听循环模式变化，更新节点数据
watch([selectedLoopMode, loopParams], () => {
  updateNode(props.node.id, {
    data: {
      ...props.node.data,
      loopMode: selectedLoopMode.value,
      loopParams: loopParams.value
    },
  });
}, { deep: true });

// 处理循环模式变更
const handleLoopModeChange = () => {
  // 重置参数为默认值
  if (selectedLoopMode.value === 'for') {
    loopParams.value = {
      startValue: '0',
      endValue: '10',
      step: '1'
    };
  } else {
    loopParams.value = {
      condition: ''
    };
  }
};
</script>

<style scoped>
.property-form {
  padding: 10px;
}
/* 卡片容器样式 */
.card-container {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 20px;
}

/* 表单区块样式 */
.form-section {
  margin-bottom: 25px;
}

.el-form-item {
  width: 100%;
  padding: 5px;
}

/* 循环模式选择框样式 */
.loop-mode-select {
  width: 100%;
  max-width: 280px;
}

/* 参数面板样式 */
.loop-params {
  background-color: #fafafa;
  border-radius: 6px;
  padding: 5px;
  border: 1px solid #f0f0f0;
}

/* 表单行样式优化 */
.form-row {
  display: flex;
  align-items: center;
}

/* 标签样式优化 */
:deep(.form-row .el-form-item__label) {
  width: 90px;
  text-align: right;
  padding-right: 15px;
  font-size: 14px;
  color: #606266;
}

/* 输入框样式优化 */
:deep(.el-input__inner), :deep(.el-select__inner) {
  border-radius: 4px;
  border-color: #dcdfe6;
  transition: all 0.2s ease;
}

:deep(.el-input__inner:focus), :deep(.el-select__inner:focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 过渡动画 */
.panel-transition {
  transition: all 0.3s ease-in-out;
  opacity: 1;
  transform: translateY(0);
}

.panel-transition-enter-from, .panel-transition-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

</style>
